<template>
  <div class="strut-div">
    <div class="item-top-province">
      <span class="time">时间：{{ nowDate }}</span>
      <!-- <span style="float: right;">
        <el-radio-group v-model="provinceType" size="mini">
          <el-radio-button label="假日市场"></el-radio-button>
          <el-radio-button label="文旅景点"></el-radio-button>
        </el-radio-group>
      </span> -->
    </div>
    <div style="height: 336px;">
      <common-table ref="provinceSourceTable" :config="config"></common-table>
    </div>
  </div>
</template>

<script>
  import CommonTableDataV from '@/components/common/common-table-datav.vue'
  import CommonTable from '@/components/common/common-table.vue'
  export default {
    components:{
      // CommonTableDataV,
      CommonTable
    },
    data() {
      return {
        nowDate: '',
        startDate: '',
        endDate: '',
        provinceType: "假日市场",

        config: {
            request: {
                url: "url",
                params: {

                }
            },
            option: {
            id:'inProvince',
                height: 336,
                tableColor: '#FBCC13',
                tableHeader: [{
                    prop: "num",
                    title: "序号",
                }, {
                    prop: "name",
                    title: "客源省",
                }, {
                    prop: "value",
                    title: "游客人数(人)",
                },{
                    prop: "value1",
                    title: "占比 (%)",
                }],
                tableData:[]
            },
        },


        // config:{
        //    header: ['序号', '客源省', '游客人数(人)','占比 (%)'],
        //     data: [
        //       ['1', '吉林', '12415',"11.2%"],
        //       ['2', '福建', '11244',"10.1%"],
        //       ['2', '河北', '9923',"9.01%"],
        //       ['4', '黑龙江', '9408',"8.23%"],
        //       ['5', '内蒙古', '9022',"7.89%"],
        //       ['6', '贵州', '8088',"6.99%"],
        //       ['7', '江西', '7765',"6.72%"],
        //       ['8', '广西', '7444',"6.3%"],
        //       ['9', '河南', '7123',"6.01%"],
        //       ['10', '陕西', '6548',"5.55%"]
        //     ],
        //     columnWidth: [80],
        //     align: ['center','center','center','center'],
        //     headerBGC:"rgba(38, 74, 125, 0.5)",
        //     // oddRowBGC:"rgba(0, 0, 0, 0.01)",
        //     // evenRowBGC:"rgba(0, 0, 0, 0.01)",
        // }
      }
    },
    mounted() {
      this.nowDate = new Date().format('yyyy年mm月dd日');
      this.startDate = new Date().format('yyyy-mm') + "-01";
      this.endDate = new Date().format('yyyy-mm-dd');
      
      this.getReceptionNumRange();
    },
    methods: {
        getReceptionNumRange() {
            let that = this;
            let _url = this.$api.getReceptionNumRange;
            let _param = {
                dataSource: '04',
                sFJNM: '00010001001400090001',
                sAreaType: '02',
                sObjName: '全部',
                sSelName: '全部',
                sObjType: '02',
                startDate: this.startDate,
                endDate: this.endDate
            }

            this.$jquery.ajax({
                type: 'post',
                url:_url,
                dataType: 'json',
                data: _param,
                contentType:'application/x-www-form-urlencoded; charset=UTF-8',
                cache: false,
                success: function (res) {
                  if (res.retCode === 200) {
                      let data = res.retData.listData;
                      let _tableData = data.mapData.map((item,index) => {
                          return Object.assign({num:index+1},item);
                      });

                      that.config.option.tableData = _tableData;

                      that.$refs.provinceSourceTable.initTable();
                  }
                }
            });
        }
    },
  }
</script>

<style>
.item-top-province {
  padding: 10px 20px;
}
.item-top-province .time {
  font-size: 22px;
  color: #C1D0FF;
}

.item-top-province .el-radio-button--mini .el-radio-button__inner {
  font-size: 18px;
}

.item-top-province .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  /* border-image: linear-gradient(0deg, rgba(2, 159, 216, 1), rgba(31, 213, 189, 1)) 10 10; */
  border-color: rgba(60, 188, 255, 1);
  background:linear-gradient(90deg,rgba(0,191,255,1),rgba(122,186,255,1));
}
.item-top-province .el-radio-button__inner:hover {
  color: rgba(20, 180, 200, 1);
}
.item-top-province .el-radio-button__inner {
  background: rgba(0, 0, 0, 0.01);
  border-color: rgba(60, 188, 255, 1);
  padding: 5px 12px;
  color: #fff;
}
.item-top-province .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 8px 0 0 8px;
}
.item-top-province .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 8px 8px 0;
}
</style>
